<template>
  <div>
    <div v-if="action" class="action">
      <a-button type="primary" v-if="AddLevel" @click="AddTop">添加一级</a-button>
      <a-button type="primary" v-if="AddChildData" @click="AddSubset(checkedKeys)">添加子级</a-button>
      <a-button v-if="Batches" @click="DeleteBatches">批量删除</a-button>
      <a-button v-if="checkAll" @click="checkAllFun">全选</a-button>
      <a-button v-if="checkAll" @click="Empty">取消全选</a-button>
      <a-button v-if="DeleteSingle" @click="RemoveSingle(selectedKeys)">删除</a-button>
    </div>
    <div class="AntAlert" v-if="Batches || DeleteSingle">
      <a-alert type="info" showIcon>
        <p slot="message">
          当前选择:
          <a class="AntMessage">{{message}}</a>
          <a @click="Empty" v-if="this.message" class="AntMessage">清空</a>
        </p>
      </a-alert>
    </div>
    <a-tree
      :checkable="checkable"
      @expand="onExpand"
      @check="onCheck"
      :expandedKeys="expandedKeys"
      :autoExpandParent="autoExpandParent"
      v-model="checkedKeys"
      @select="onSelect"
      :checkStrictly="true"
      :selectedKeys="selectedKeys"
      :treeData="newTreeData"
    ></a-tree>
  </div>
</template>
<script lang="ts">
const AntCard = () => import("../Card.vue").then(m => m.default || m);
import { Component, Vue, Prop, Emit, Watch } from "vue-property-decorator";
@Component({
  name: "ant-tree",
  layout: "menu",
  components: {
    AntCard
  }
})
export default class AntTree extends Vue {
  @Prop({
    type: Array,
    required: true,
    default: () => {
      return [];
    }
  })
  treeData!: any[];
  @Prop({ type: Boolean, required: false, default: false }) checkable!: boolean;
  @Prop({ type: Boolean, default: false }) action?: boolean;
  @Prop({ type: Boolean, default: true }) AddLevel?: boolean;
  @Prop({ type: Boolean, default: false }) DeleteSingle?: boolean;
  @Prop({ type: Boolean, default: false }) checkAll?: boolean;
  @Prop({ type: Boolean, default: true }) AddChildData?: boolean;
  @Prop({ type: Boolean, default: false }) Batches?: boolean;

  expandedKeys: string[] = [];
  autoExpandParent: boolean = true;
  checkedKeys: string[] = [];
  selectedKeys: string[] = [];
  newTreeData: any[] = [];
  message: string = "";
  created() {
    const _this: any = this;
    //递归处理多语言标题
    const getChilds = (val: any) => {
      let res: any[] = [];
      val.map(item => {
        item.title = _this.$language(item.title);
        if (item.children) {
          item.children = getChilds(item.children);
        }
        res.push(item);
      });
      return res;
    };
    this.newTreeData = getChilds(this.treeData);
  }
  onExpand(expandedKeys) {
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    this.expandedKeys = expandedKeys;
    this.autoExpandParent = false;
  }
  onCheck(checkedKeys) {
    this.checkedKeys = checkedKeys;
  }
  onSelect(selectedKeys, info) {
    this.message = info.node.title;
    this.selectedKeys = selectedKeys;
    this.SelectTree(selectedKeys, info.node.title);
  }
  Empty() {
    this.message = "";
    this.selectedKeys = [];
    this.checkedKeys = [];
  }
  DeleteBatches() {
    this.commKesy(this.checkedKeys);
  }
  commKesy(val: string[]) {
    const _this: any = this;
    const quantity = val.length;
    if (quantity > 0) {
      _this.$confirm({
        title: "确定删除?",
        content: `确定删除所选中的${quantity}项数据`,
        onOk() {
          _this.Delete(val);
        },
        onCancel() {}
      });
    } else {
      _this.$message.info("请选择一条数据");
    }
  }
  RemoveSingle() {
    this.commKesy(this.selectedKeys);
  }
  AddSubset() {
    const _this: any = this;
    if (!this.message) {
      _this.$message.info("请选择一个添加项");
    } else {
      this.AddChild(this.selectedKeys, this.message);
    }
  }
  checkAllFun() {
    const data = this.newTreeData;
    let res: string[] = [];
    const filterFun = (data: any) => {
      data.map(item => {
        if (item.children) {
          filterFun(item.children);
        }
        res.push(item.key);
      });
      return res;
    };
    const result = filterFun(data);
    this.checkedKeys = result;
  }
  //checkStrictly checkable状态下节点选择完全受控（父子节点选中状态不再关联）回调
  @Watch("checkedKeys")
  checkedKeysFun(newData: object, oldData: object) {
    this.checkedSelect(newData);
  }

  //批量删除
  @Emit("Delete")
  Delete(n: string[]) {}
  //添加一级
  @Emit("AddTop")
  AddTop() {}
  //添加子级
  @Emit("AddChild")
  AddChild(n: string[], title: string) {}
  //点击属性结构选择的值
  @Emit("SelectTree")
  SelectTree(n: string[], title: string) {}
  //点击复选框checkedKeys v-model动态变化值
  @Emit("checkedSelect")
  checkedSelect(n: object) {}
}
</script>
<style lang="less" scoped>
.AntAlert {
  margin-top: 10px;
  margin-bottom: 10px;
}
.AntMessage {
  display: inline-block;
  margin-left: 10px;
}
.action {
  margin-bottom: 10px;
}
</style>